{% extends 'base/base.html' %}


{% block css %}
<style>
.head{
    width: 200px;
    height: 200px;
    border: 1px solid lightblue;
    border-radius: 50%;
    {% if request.user.header %}
    background: url("{{ request.user.header.url }}") no-repeat center;
    {% else %}
    background: #f0f0f0;
    {% endif %}
    background-size: cover;
    position: relative;
}
.head input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

</style>
{% endblock %}


{% block js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    let chang_btn = document.querySelector(".change_btn");
    let head_input = document.querySelector("#id_header");
    let head = document.querySelector(".head");
    
    if (head_input) {
        head_input.onchange = function (){
            if (this.files && this.files[0]) {
                const fileReader = new FileReader();
                fileReader.onload = function (e){
                    head.style.backgroundImage = `url(${e.target.result})`;
                    head.style.backgroundSize = 'cover';
                }
                fileReader.readAsDataURL(this.files[0]);
                
                if (chang_btn) {
                    chang_btn.disabled = false;
                    chang_btn.classList.remove("btn-default");
                    chang_btn.classList.add("btn-success");
                }
            }
        }
    }
});
</script>
{% endblock %}

{% block main %}

    <h1>个人中心</h1>

    <form action="" method="post" enctype="multipart/form-data">
     {% csrf_token %}
        <div class="form-group">
            {{ form.header.label_tag }}
            <div class="head">
                {{ form.header }}
            </div>
            
            {% if form.header.errors %}
                {% for error in form.header.errors %}
                    <p class="text-danger">{{ error }}</p>
                {% endfor %}
            {% endif %}
        </div>

        <button type="submit" class="btn btn-primary change_btn">确认修改</button>
    </form>

{% endblock %}